Grid Landing Page with Image Swap on Hover DOUBLE class

Note: Use this code when you need to create a category grid with images that change on hover. The first image is the one that shows by default and the second image is the one that shows on hover. To create more than one category wrapper, copy and paste cat-item-wrapper inside of cat-wrapper double as many times as you have categories. This can be seen in use here, Test Page

<div class="cat-wrapper double">
    <div class="cat-item-wrapper">
        <a class="cat-img-link" href="#">
            <img src="#" alt="" />
            <img src="#" alt="" />
            <div class="cat-product-shop">
                <h3 class="cat-product-name">**cat title goes here**</h3>
            </div>
        </a>
    </div>
</div>